<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>基本列表</title>
	<!-- 引入vue开发环境版本 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
	<div id="root">
		<h2>搜索</h2>
		<input type="text" placeholder="请输入你要搜索的关键字" v-model="keywords">
		<ul>
			<li v-for="(p,index) of filterPerons" :key="index">
				{{p.name}}-{{p.age}}-{{p.age}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//#region
		// new Vue({
		// 	el: '#root',
		// 	data: {
		// 		keywords: "",
		// 		persons: [
		// 			{ id: '001', name: '马冬梅', age: 18 },
		// 			{ id: '002', name: '周冬雨', age: 19 },
		// 			{ id: '003', name: '周杰伦', age: 20 },
		// 			{ id: '004', name: '温兆伦', age: 21 }
		// 		],
		// 		filterPersons: []
		// 	},
		// 	//通过监听属性实现对关键字的搜索
		// 	watch: {
		// 		keywords: {
		// 			immediate: true,
		// 			handler(val) {
		// 				// this.filterPersons = this.persons.filter((p) => {
		// 				// 	return p.name.indexOf(val) !== -1;
		// 				// })
		// 				this.filterPersons = this.persons.filter(function(p){
		// 					return p.name.indexOf(val) !==-1;

		// 				})
		// 			}
		// 		}
		// 	}
		// })
		//#endregion


		new Vue({
			el: '#root',
			data: {
				keywords: "",
				persons: [
					{ id: '001', name: '马冬梅', age: 18 },
					{ id: '002', name: '周冬雨', age: 19 },
					{ id: '003', name: '周杰伦', age: 20 },
					{ id: '004', name: '温兆伦', age: 21 }
				],
			},
			//通过计算属性实现对关键字的搜索
			computed: {
				filterPerons() {
					return this.persons.filter((p)=>{
						return p.name.indexOf(this.keywords) !==-1
					})
				}
			}
		})

	</script>
</html>